import React, {Component} from 'react';
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

// 富文本编辑器,此时为自定义表单控件
// this.props可得到
export default class Editor extends Component {
  state = {
    // 创建一个空的editorState作为初始值
    editorState: BraftEditor.createEditorState(null)
  }
  componentDidMount() {
    const htmlContent = this.props.value;
    this.setState({
      editorState: BraftEditor.createEditorState(htmlContent)
    });
  }

  handleEditorBlur = (editorState) => {
    this.setState({ editorState }, () => {
      this.props.onBlur(editorState); // 必须传递
    });
  }
  render() {
    const { editorState } = this.state
    return (
      <div className="editor" style={{border: '1px solid #F2F2F2'}}>
        <BraftEditor
          value={editorState}
          // onChange={this.handleEditorChange}
          onBlur={this.handleEditorBlur}
        />
      </div>
    )
  }
}
